<template>
  <el-row :gutter="20" class="content-row">
    <el-col :span="24">
      <el-card class="content-card">
        <template #header>
          <div class="card-header">
            <h3>部门工作效率排名</h3>
          </div>
        </template>
        <div ref="departmentChart" class="chart-container large"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, watch } from 'vue'
  import * as echarts from 'echarts'

  interface DepartmentPerformance {
    data: Array<{
      dept_name: string
      completed_tasks: number
    }>
  }

  interface Props {
    departmentPerformance: DepartmentPerformance | undefined
  }

  const props = defineProps<Props>()

  // 图表实例引用
  const departmentChart = ref<HTMLElement>()

  // 图表对象
  let departmentChartInstance: echarts.ECharts | null = null

  // 初始化部门工作效率排名图
  const initDepartmentChart = () => {
    if (
      departmentChart.value &&
      props.departmentPerformance &&
      props.departmentPerformance.data.length
    ) {
      departmentChartInstance?.dispose()
      departmentChartInstance = echarts.init(departmentChart.value)
      const deptData = props.departmentPerformance.data

      const deptOption = {
        tooltip: {
          trigger: 'axis' as const,
          axisPointer: {
            type: 'shadow' as const,
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          type: 'category' as const,
          data: deptData.map(item => item.dept_name),
          axisLabel: {
            interval: 0,
            rotate: 30,
          },
        },
        yAxis: {
          type: 'value' as const,
          name: '完成任务数',
        },
        series: [
          {
            name: '完成任务数',
            type: 'bar' as const,
            data: deptData.map(item => item.completed_tasks),
            itemStyle: {
              color: function (params: any) {
                const colorList = [
                  '#FF7F50',
                  '#87CEFA',
                  '#DA70D6',
                  '#32CD32',
                  '#6495ED',
                  '#FF69B4',
                  '#B8860B',
                  '#FFA500',
                  '#9370DB',
                  '#98FB98',
                ]
                return colorList[params.dataIndex % colorList.length]
              },
            },
            label: {
              show: true,
              position: 'top' as const,
            },
          },
        ],
      }
      departmentChartInstance.setOption(deptOption as any)
    }
  }

  // 刷新图表
  const resizeChart = () => {
    departmentChartInstance?.resize()
  }

  // 监听部门数据变化，重新初始化图表
  watch(
    () => props.departmentPerformance,
    () => {
      initDepartmentChart()
    },
    { deep: true }
  )

  // 组件挂载时
  onMounted(() => {
    initDepartmentChart()
    window.addEventListener('resize', resizeChart)
  })

  // 组件卸载时
  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart)
    departmentChartInstance?.dispose()
  })
</script>

<style scoped lang="scss">
  .content-row {
    margin-bottom: 20px;
  }

  .content-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
  }

  .chart-container.large {
    width: 100%;
    height: 400px;
  }
</style>
